<template>
	<view>
			<view class="body ">
				<view class="u-tabs-box">
					<u-tabs-swiper activeColor="#2979ff" ref="tabs" :list="curSwipterList" :current="current" @change="changeSwipter" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
				</view>
				<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
					<swiper-item class="swiper-item" v-for="(swiperItem,index) in swipterList ">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
							<view class="page-box u-skeleton">
								 <view class="">
								 	 <lg-list-item ref="listItemRef" :type="type" :data="dataList[index]"></lg-list-item>
								 </view>
								<u-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></u-loadmore>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 骨架屏 -->
		</view>
</template>

<script>
	export default {
		name:"lg-tabs-swiper",
		props:{
			request:{
				type:Function
			},
			type:{
				type:String
			},
			swipterList:{
				type:Array,
				default: () => ([
					{name:"swipter0"},
					{name:"swipter1"},
					{name:"swipter2"},
					{name:"swipter3",count: 12},
					])
			},
			list:{
				type:Array, 
				default:() => ( new Array(4).fill([]))
			},
			skeletonLoading:{
				type:Boolean,
				default:true
			}
		},
		watch:{
		   list(v){
			   this.dataList = v
		   },
		   skeletonLoading(v){
			   this.curSkeletonLoading = v
		   }
		},
		data() {
			return {
				curSkeletonLoading:this.skeletonLoading,
				dataList:this.list,
				curSwipterList: this.swipterList,
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: new Array(this.swipterList.length).fill('loadmore') 
			};
		},
		created() {
			this.swipterList.forEach((fi,index) => {
				this.getPageDataList(index)
			})
		},
		methods:{
			
			// 页面数据
			async getPageDataList(idx) {
				const list = this.dataList[idx] || [];
				let lastId = '';
				if (list.length) {
					lastId = list[list.length-1]._id;
				}
				const {
					result: { data = [] }
				} = await this.request({ id: lastId, type: idx + 1 });
				if (data.length) {
					this.dataList[idx].push(...data);
					this.loadStatus.splice(this.current, 1, 'loadmore');
				}else{
					this.loadStatus.splice(this.current, 1, 'nomore');
				}
				
				
			},
			reachBottom() {
				// 此tab为空数据
				if (this.current != 2) {
					this.loadStatus.splice(this.current, 1, 'loading');
					setTimeout(() => {
						this.getPageDataList(this.current);
					}, 1200);
				}
			},
			// tab栏切换
			changeSwipter(index) {
				this.swiperCurrent = index;
				this.getPageDataList(index);
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		},
	}
</script>

<style lang="scss" scoped>

.body {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}

</style>
